<template>
    <!-- 订单详情界面 -->
    <div class="detail">
        <!-- 顶部导航栏 -->
        <div class="header">
            <div class="navbar">
                <span @click="$router.go(-1)" style="float: left;padding-left: 20px;font-size: 14px;">
                    <van-icon name="arrow-left" /></span>
                <span>订单详情</span>
            </div>
        </div>
        <!-- 订单详情 -->
        <div class="orderDetail">
            <van-card :num="order.number" :price="'￥'+order.price+'.00'" :title="order.product.name"
                :thumb="order.product.photo" v-for="order in orderLines" :key="order.productId"
                style="font-size: 14px;font-weight: 500;">
                <template #tags>
                    <van-tag plain type="danger" style="margin-top: 5px;">{{order.product.description}}</van-tag>
                </template>
            </van-card>
            <div style="float: right;font-weight: 700px;margin-top: 20px;margin-right: 20px;">
                总价：￥<span style="color:#ee0a24">{{total}}</span>
            </div>
        </div>
        <!-- 分割线 -->
        <van-divider style="margin-top: 20px" />
        <!-- 底部订单状态信息 -->
        <div class=" bottom">
            <p v-if="orderDetail.address">
                服务地址：{{orderDetail.address.city}}{{orderDetail.address.area}}{{orderDetail.address.address}}
            </p>
            <p v-if="orderDetail.address">
                联系方式：{{orderDetail.address.username}}({{orderDetail.address.telephone}})</p>
            <p>下单时间：{{orderDetail.orderTime | dateFormat}}</p>
            <p v-if="orderDetail.serviceTime">服务时间：{{orderDetail.serviceTime | dateFormat}}</p>
        </div>
        <!-- 完成订单按钮 -->
        <div class="confirmOrder" v-if="orderDetail.status=='待确认'&&comments.length==0">
            <div class="confirmOrderBtn" @click="confirmOrder">确认完成</div>
        </div>

        <!-- 订单评论信息 -->
        <div class="comment_list" v-if="comments.length">
            <div>
                <van-divider>您的评论</van-divider>
            </div>
            <van-card v-for="comment in comments" :key="comment.id">
                <template #tags>
                    <div class="delete" @click="deleteComment(comment.id)">x</div>
                    <van-image round width="4rem" height="4rem" :src="orderDetail.customer.userFace"
                        style="float:left;margin-top:10px;" />
                    <div style="margin-left: 70px;margin-top:10px; padding: 0 0.5em">
                        <div style="line-height: 2em">
                            <strong>{{ orderDetail.customer.realname }}</strong>
                        </div>
                        <div style="line-height: 2em">{{ comment.content }}</div>
                        <div style="line-height: 2em">
                            评论时间： {{ comment.commentTime | fmtDate_global }}
                        </div>
                    </div>
                </template>
            </van-card>
        </div>
        <!-- 订单进度信息 -->
        <div class="orderStep">
            <van-divider>订单进度</van-divider>
            <van-steps :active="activeStep">
                <van-step>买家下单</van-step>
                <van-step>待派单</van-step>
                <van-step>待接单</van-step>
                <van-step>待确认</van-step>
                <van-step>已完成</van-step>
            </van-steps>
        </div>
        <div style="height: 80px;"></div>
    </div>

</template>
<script>
    // 引入vuex的辅助函数
    import {
        mapActions,
        mapState,
        mapGetters,
        mapMutations
    } from 'vuex'
    import {
        get
    } from '@/http/axios'
    export default {

        data() {
            return {
                orderId: '',
                // 订单详情数据
                orderDetail: {},
                // 订单下单信息
                orderLines: [],
                total: 0,
                // 订单评论信息
                comments: '',
                activeStep: 0

            }
        },
        filters: {
            priceFilter(data) {
                return 1
            }
        },
        methods: {
            // 完成订单
            async confirmOrder() {
                let orderId = this.orderDetail.id;
                let res = await get('/order/confirmOrder', {
                    orderId
                })
                if (res.data.status == 200) {
                    this.$dialog.confirm({
                            title: res.data.message,
                            message: '是否现在去评论？',
                        })
                        .then(() => {
                            // on confirm
                            this.$router.push({
                                path: '/manager/comment',
                                query: {
                                    orderId: this.orderDetail.id,
                                    customerId: this.orderDetail.customerId,
                                }
                            })
                        })
                        .catch(() => {
                            // on cancel
                            this.$router.push({
                                path: '/manager/order'
                            })
                        });
                }
            },
            // 通过订单id查询详细信息
            async getOrderDetail(id) {
                let res = await get('/order/findById', {
                    id
                })
                // 全部订单数据
                this.orderDetail = res.data.data
                // 订单下单信息数据
                this.orderLines = res.data.data.orderLines
                // 订单价格
                this.total = res.data.data.total
                // 订单评论数据
                this.comments = res.data.data.comments

            },
            // 删除评论
            deleteComment(id) {
                this.$dialog.confirm({
                        title: '是否删除评论？'
                    })
                    .then(async () => {
                        let res = await get('/orderComment/deleteById', {
                            id
                        })
                        this.$toast.success("删除成功!");
                        // 刷新页面
                        this.getOrderDetail(this.orderId)
                    })
                    .catch(() => {

                    });
            },
            // 判断订单状态，显示进度条信息
            stepDetail() {
                if (this.orderDetail.status == '待派单') {
                    this.activeStep = 1
                } else if (this.orderDetail.status == '待接单') {
                    this.activeStep = 2
                } else if (this.orderDetail.status == '待确认') {
                    this.activeStep = 3
                } else if (this.orderDetail.status == '已完成') {
                    this.activeStep = 4
                }

            }
        },
        created() {
            // 接收跳转传递的参数
            this.orderId = this.$route.query.id
            // 通过订单id查询详细信息
            this.getOrderDetail(this.orderId).then(res => {
                // 判断订单状态
                this.stepDetail()
            })

        },
    }
</script>
<style scope>
    .bottom {
        width: 95%;
        margin: 0 auto;
        border-radius: 5px;
        background-color: #f8f8f8;
        color: #999;
        font-size: 12px;
        margin-top: 20px;
        padding: 10px;
    }

    .van-card {
        background-color: #fff;
        box-shadow: 0 0 6px 0 #ccc;
        border-radius: 5px;
        width: 95%;
        margin: 0 auto;
        margin-top: 5px;
    }

    .navbar {
        background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
        height: 46px;

        text-align: center;
        color: #fff;

    }

    .navbar span {
        color: #fff;
        margin-top: 0;
        line-height: 46px;
    }

    .confirmOrderBtn {
        width: 53%;
        height: 40px;
        background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
        text-align: center;
        color: #fff;
        border-radius: 22px;
        line-height: 40px;
        margin: 0 auto;
        margin-top: 2em;
        cursor: pointer;
    }

    /* 提交按钮 */
    .confirmOrder {
        margin: 0 auto;
    }

    /* 订单评论 */

    .comment_list {
        clear: both;
    }

    .comment {
        width: 95%;
        border: 1px solid #dcdfe6;
        margin: 0 auto;
    }

    .container {
        padding: 20px;
    }

    .container .title {
        text-align: center;
    }

    .content>>>img {
        width: 250px;
        height: 210px;
    }

    .title_sub {
        color: #999;
        font-size: 13px;
        text-align: center;
        margin-bottom: 15px;
    }

    /* 删除评论按钮 */
    .delete {
        width: 15px;
        height: 15px;
        border-radius: 5px;
        background-color: red;
        color: #fff;
        line-height: 15px;
        text-align: center;
        position: relative;
        float: right;
        top: -7px;
        right: -15px;
    }

    /* 订单进度信息 */
    .orderStep {
        margin-top: 10px;

    }
</style>